<template>
  <div v-loading.lock="loading" class="base-content">
    <div class="basic-info">
      <el-table
        class="filter unsetborder"
        :class="{ 'show-filter': showFilterRow }"
        :data="list"
        element-loading-text="Loading"
        fit
        highlight-current-row
        height="calc(100% - 190px)"
        @selection-change="handleSelectionChange"
      >
        <el-table-column type="selection" width="55">
          <el-table-column type="selection"></el-table-column>
        </el-table-column>
        <el-table-column align="center" width="55">
          <template #header>
            <div class="filter-icon" title="筛选">
              <SvgIcon
                class-name="filter"
                icon-class="filter"
                @click="filterIconClick"
              />
            </div>
          </template>
          <el-table-column width="50"></el-table-column>
        </el-table-column>
        <el-table-column align="center" label="序号" width="50">
          <el-table-column width="100" align="center">
            <template v-slot="scope">{{ scope.$index + 1 }}</template>
          </el-table-column>
        </el-table-column>
        <!-- <el-table-column label="任务编号">
          <template slot-scope="scope">
            {{ scope.row.entrustTaskNum }}
          </template>
        </el-table-column>
        <el-table-column label="检测项目">
          <template slot-scope="scope">
            {{ scope.row.detectionItemName }}
          </template>
        </el-table-column> -->
        <el-table-column label="委托单号">
          <el-table-column prop="entrustOrderNum">
            <template #header>
              <el-input
                v-if="showFilterRow"
                v-model="queryForm.entrustOrderNum"
                @keyup.enter.native="onQuery"
              ></el-input>
            </template>
            <template slot-scope="scope">
              {{ scope.row.entrustOrderNum }}
            </template>
          </el-table-column>
        </el-table-column>
        <el-table-column label="委托单位">
          <el-table-column prop="entrustUnit">
            <template #header>
              <el-input
                v-if="showFilterRow"
                v-model="queryForm.entrustUnit"
                @keyup.enter.native="onQuery"
              ></el-input>
            </template>
            <template slot-scope="scope">
              {{ scope.row.entrustUnit }}
            </template>
          </el-table-column>
        </el-table-column>
        <el-table-column label="样品名称">
          <el-table-column prop="sampleName">
            <template #header>
              <el-input
                v-if="showFilterRow"
                v-model="queryForm.sampleName"
                @keyup.enter.native="onQuery"
              ></el-input>
            </template>
            <template slot-scope="scope">
              {{ scope.row.sampleName }}
            </template>
          </el-table-column>
        </el-table-column>
        <el-table-column label="检测项目">
          <el-table-column prop="detectionItemName">
            <template #header>
              <el-input
                v-if="showFilterRow"
                v-model="queryForm.detectionItemName"
                @keyup.enter.native="onQuery"
              ></el-input>
            </template>
            <template slot-scope="scope">
              {{ scope.row.detectionItemName }}
            </template>
          </el-table-column>
        </el-table-column>

        <el-table-column label="样品编号">
          <el-table-column prop="sampleNum">
            <template #header>
              <el-input
                v-if="showFilterRow"
                v-model="queryForm.sampleNum"
                @keyup.enter.native="onQuery"
              ></el-input>
            </template>
            <template slot-scope="scope">
              {{ scope.row.sampleNum }}
            </template>
          </el-table-column>
        </el-table-column>

        <el-table-column label="记录单模板编号">
          <el-table-column prop="templateCode">
            <template #header>
              <el-input
                v-if="showFilterRow"
                v-model="queryForm.templateCode"
                @keyup.enter.native="onQuery"
              ></el-input>
            </template>
            <template slot-scope="scope">
              {{ scope.row.templateCode }}
            </template>
          </el-table-column>
        </el-table-column>
        <el-table-column label="记录单模板名称">
          <el-table-column prop="templateName">
            <template #header>
              <el-input
                v-if="showFilterRow"
                v-model="queryForm.templateName"
                @keyup.enter.native="onQuery"
              ></el-input>
            </template>
            <template slot-scope="scope">
              {{ scope.row.templateName }}
            </template>
          </el-table-column>
        </el-table-column>

        <!-- <el-table-column label="接收人">
          <template slot-scope="scope">
            {{ scope.row.taskRecipient }}
          </template>
        </el-table-column> -->
        <el-table-column label="接收时间">
          <el-table-column prop="taskReceptionTime" width="150">
            <template #header>
              <el-date-picker
                v-model="queryForm.taskReceptionTimeList"
                type="datetimerange"
                value-format="yyyy-MM-dd"
                format="yyyy-MM-dd"
                align="right"
                range-separator="至"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
              ></el-date-picker>
            </template>
            <template slot-scope="scope">
              {{ formatTime(scope.row.taskReceptionTime) }}
            </template>
          </el-table-column>
        </el-table-column>
        <el-table-column label="操作" width="140">
          <el-table-column width="180">
            <template #header>
              <div v-if="showFilterRow" class="search-operate">
                <el-link type="primary" @click="getList">搜索</el-link>
                <el-link @click="cancelForm">清空</el-link>
              </div>
            </template>
            <template slot-scope="scope">
              <div class="base-table-operation">
                <el-link type="primary" @click="handleEdit(scope.row, true)"
                  >填写实验记录单</el-link
                >
                <el-link
                  v-rights="'Delete'"
                  size="mini"
                  type="danger"
                  @click="handleDelete(scope.row)"
                  >删除</el-link
                >
              </div>
            </template>
          </el-table-column>
        </el-table-column>
      </el-table>

      <!-- 分页 -->
      <BasePagination
        :total="pagination.total"
        :page-index="pagination.pageIndex"
        :page-size="pagination.pageSize"
        @sizeChange="sizeChange"
        @changePage="currentChange"
      />
    </div>
    <TaskExperimentTemplateRecordEdit
      v-if="dialogFormVisibleAdd"
      ref="TaskExperimentTemplateRecordEdit"
      :dialog-form-visible.sync="dialogFormVisibleAdd"
      :table-data.sync="experimentTemplateData"
      :add-state.sync="addState"
      :pagination-experiment.sync="paginationExperiment"
      :experiment-template-data.sync="experimentTemplateData"
      @closeAddDialog="closeAddDialog"
    />
    <ExperimentTemplateRecordEdit
      v-if="hasChooseTemplate"
      ref="ExperimentTemplateRecordEdit"
      v-model="recordData"
      :operate-type="operateType"
      :entrust-task-id="entrustTaskId"
      :source="2"
      :dialog-form-visible.sync="hasChooseTemplate"
      @callback="resetList"
    />
  </div>
</template>

<script>
import { getDetecitionTask } from "../../../api/EntrustTaskManage/EntrustTask.js";
import {
  updateRecordId,
  deleteRecord,
} from "../../../api/SampleInfo/SampleInfoDetectionItemRecordSheet.js";
import { formatTime } from "../../../utils/time";
import { deepClone } from "../../../utils";
import TaskExperimentTemplateRecordEdit from "../../../components/ModuleEln/TaskExperimentTemplateRecordEdit.vue";
import ExperimentTemplateRecordEdit from "@/ModuleEln/ModuleEln/views/ModuleEln/ExperimentTemplateRecord/ExperimentTemplateRecordEdit.vue";
import {getSingleList as getSingleListRecord} from "@/ModuleEln/ModuleEln/api/Eln/ExperimentTemplateRecord.js";
import {getSingleList} from "@/ModuleEln/ModuleEln/api/Eln/ExperimentTemplate.js";
export default {
  name: "ElnTaskList",
  components: {
    TaskExperimentTemplateRecordEdit,
    ExperimentTemplateRecordEdit,
  },
  data() {
    return {
      formatTime,
      tableDatas: [],
      loading: true,
      showFilterRow: false,

      list: [],
      queryForm: {
        entrustOrderNum: "",
        entrustUnit: "",
        sampleName: "",
        detectionItemName: "",
        sampleNum: "",
        templateCode: "",
        templateName: "",
        taskReceptionTimeList: [],
        taskReceptionTimeState: null,
        taskReceptionTimeEnd: null,
      },
      dialogFormVisible: false,
      pagination: {
        pageIndex: 1,
        pageSize: 10,
        total: 0,
      },
      systemType: "",
      dialogFormVisibleAdd: false,
      paginationExperiment: {
        pageIndex: 1,
        pageSize: 10,
        total: 0,
      },
      addState: false,
      experimentTemplateData: [],
      recordData: [],
      entrustTaskId: "0",
      operateType: 0,
      hasChooseTemplate: false,
      rowData: {},
    };
  },
  created() {
    // 查询字典表判断系统类型
    // getConfigByKey("SystemType").then((res) => {
    //   this.systemType = res.data[0].value;
    // });
    this.getList("filter");
  },
  methods: {
    handleDelete(rowData) {
      this.Helper.deleteConfirm(() => {
        this.loading = true;
        deleteRecord({ id: rowData.sampleInfoDetectionItemRecordSheetId })
          .then((res) => {
            this.getList();
            this.loading = false;
          })
          .catch(() => {
            this.loading = false;
          });
      });
    },
    filterIconClick() {
      this.showFilterRow = !this.showFilterRow;
      !this.showFilterRow && this.cancelForm();
    },
    currentChange(val) {
      this.pagination.pageIndex = val;
      this.getList();
    },
    sizeChange(val) {
      this.pagination.pageIndex = 1;
      this.pagination.pageSize = val;
      this.getList("filter");
    },
    getList(flag) {
      if (flag) {
        this.pagination.pageIndex = 1;
      }

      this.queryForm.taskReceptionTimeState = null;
      this.queryForm.taskReceptionTimeEnd = null;
      if (
        this.queryForm.taskReceptionTimeList !== null &&
        this.queryForm.taskReceptionTimeList.length !== 0
      ) {
        this.queryForm.taskReceptionTimeState =
          this.queryForm.taskReceptionTimeList[0] + " 00:00:00";
        this.queryForm.taskReceptionTimeEnd =
          this.queryForm.taskReceptionTimeList[1] + " 23:59:59";
      }

      this.loading = true;
      this.taskListFun({
        ...this.queryForm,
        ...this.pagination,
      });
    },
    taskListFun(obj) {
      this.list = [];
      getDetecitionTask(obj)
        .then((res) => {
          if (res.code === 200) {
            // if (res.data.dataList.length <= 0) {
            //   return;
            // }
            this.pagination.total = res.data.total;

            this.list = res.data.dataList;
            this.loading = false;
          }
        })
        .catch((res) => {
          this.loading = false;
        });
    },

    onQuery() {
      this.getList();
    },
    handleSelectionChange(val) {
      this.tableDatas = val;
    },
    // 清空筛选条件
    cancelForm() {
      this.queryForm = this.$options.data().queryForm;
      this.getList();
    },
    resetList(params, originalData, recordId) {
      this.recordData = null;
      const data = deepClone(this.rowData);
      if (recordId) {
        data.experimentTemplateRecordId = recordId;
      }
      data.SubmitState = params.submitStatus;
      updateRecordId(data).then((res) => {
        this.getList("filter");
      });
    },
    handleEdit(row, index) {
      this.recordData = [];
      this.rowData = row;
      this.entrustTaskId = row.taskId;
      if (
        row.experimentTemplateRecordId !== undefined &&
        row.experimentTemplateRecordId !== null &&
        row.experimentTemplateRecordId !== "0"
      ) {
        this.operateType = 1;

        getSingleListRecord({ Id: row.experimentTemplateRecordId })
          .then((res) => {
            this.recordData = deepClone(res.data);
            this.hasChooseTemplate = true;
          });
      } else {
        this.operateType = 0;
        getSingleList({ Id: row.experimentTemplateRecordTemplateId })
          .then((res) => {
            this.recordData = deepClone(res.data);
            this.hasChooseTemplate = true;
          });
      }
    },
  },
};
</script>
